<template>
  <v-menu
    offset-y
    :open-on-click="openOnClick"
    :open-on-focus="openOnFocus"
    :open-on-hover="openOnHover"
    transition="slide-y-transition"
    bottom
  >
    <template v-slot:activator="{ on, attrs }">
      <v-btn 
        depressed
        :color="btnColor"
        :icon="isIcon"
        v-bind="attrs"
        v-on="on"
      >
        {{ btnText }}
        <v-icon color="#fff">
          {{ icon }}
        </v-icon>
        <v-icon 
          v-if="arrowDown"
          right
          light
        >
          mdi-chevron-down 
        </v-icon>
      </v-btn>
    </template>
    <v-list>
      <v-list-item
        v-for="(item, index) in items"
        :key="index"
        link
        @click="onClickItem(item)"
      >
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script lang="ts">
interface ItemData {
	value: number,
	title: string
}

export default {
	props: {
		btnText: {
			type: String,
			default: ''
		},
		btnColor: {
			type: String,
			default: 'primary'
		},
		items: {
			type: Array,
			default: () => []
		},
		openOnClick: {
			type: Boolean,
			default: true
		},
		openOnHover: {
			type: Boolean,
			default: false
		},
		openOnFocus: {
			type: Boolean,
			default: false
		},
		arrowDown: {
			type: Boolean,
			default: true
		},
		icon: {
			type: String,
			default: ''
		}
	},
	computed: {
		isIcon () {
			return this.icon ? true : false
		}
	},
	mounted () {
		console.log(this.items)
	},
	methods: {
		onClickItem (item: ItemData) {
			this.$emit('click', item)
		}
	}
}
</script>